const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

console.log("加载开发模式配置")
module.exports = {
    mode: 'development',
    context: path.resolve(__dirname),
    devServer: {
        contentBase: path.resolve(__dirname, './dist'),
        port: '8088',
        inline: true, //实施重载模式，还有一种是frame框架模式
        compress: true,
        // 2)模拟数据  这种方式不需要express服务器
        // before(app) {
        //     app.get('/user', function(req, res) {
        //         res.json({
        //             "name": "jany-before"
        //         })
        //     });

        // }

        // 1):代理访问  需要开一个express服务器
        // proxy: {
        //     '/api': {
        //         target: 'http://localhost:3000', //配置了一个代理,只要请求有api开头的，都去3000端口找啦
        //         pathRewrite: { '/api': '' }
        //     }

        // }
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './public/index.html',
            chunks: ['index']
        }),

        new htmlWebpackPlugin({
            filename: 'page.html',
            template: './public/page.html',
            chunks: ['page'],
        }),

        new htmlWebpackPlugin({
            filename: 'page2.html',
            template: './public/page2.html',
            chunks: ['page2'],
        }),

        new htmlWebpackPlugin({
            filename: 'page3.html',
            template: './public/page3.html',
            chunks: ['page3'],
        }),

        new htmlWebpackPlugin({
            filename: 'page4.html',
            template: './public/page4.html',
            chunks: ['page4'],
        }),

        new htmlWebpackPlugin({
            filename: 'page5.html',
            template: './public/page5.html',
            chunks: ['page5'],
        }),

        new htmlWebpackPlugin({
            filename: 'login.html',
            template: './public/login.html',
            chunks: ['login'],
        }),
        new htmlWebpackPlugin({
            filename: 'managerPage.html',
            template: './public/managerPage.html',
            chunks: ['managerPage'],
        }),

        new MiniCssExtractPlugin({
            // 类似于 webpackOptions.output 中的选项
            // 所有选项都是可选的
            filename: 'style/[name].css',
        }),
        // new webpack.ProvidePlugin({
        //     $: "jquery",
        //     jQuery: "jquery"
        // }),

        new webpack.HotModuleReplacementPlugin()

    ],
    devtool: 'source-map',


}